<template>
  <div id="app">
    <div class="box">
      <div class="v-html" v-html="loading[index]" v-if="ishtml"></div>
      <div class="v-text" v-text="loading[index]" v-else></div>
      <div></div>
    </div>
    <div class="btn">
      <div class="change-btn" @click="changeShow">
        {{isHtml ? "查看源码" : "查看示例"}}
      </div>
      <div class="loading-btn">
        <div class="loading-btn-item" @click="index = 0">1</div>
        <div class="loading-btn-item" @click="index = 1">2</div>
        <div class="loading-btn-item" @click="index = 2">3</div>
      </div>
    </div>
  </div>
</template>
<script>
  import "../assets/css/loading.css"
  export default{
    data(){
      return{
        loading:[`<div class="sk-chase"></div>`],
        isHtml:true,
        index:0
      }
    },
    methods:{
      changeShow(){
        this.isHtml = !this.isHtml
      }
    }
  }
</script>
<style>
  body{
    margin: 0;
    padding: 0;
  }
  #app{
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right,#7474bf,#348ac7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>